<template>
	<div class="number">
    <div class="hei10"></div>
     <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
       当前位置：
       <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
       <router-link to="/productionBasismanag" style="color: #409eff;">产品渠道管理</router-link>>
       号码管理
     </div>
     <div class="hei10"></div>
     <div class="team">
			<div class="powertop">
				<router-link class="powertopli powertopact" to="/productionBasismanag/numberManagement/number">号码管理</router-link>
				<router-link class="powertopli" to="/productionBasismanag/numberManagement/numberBase">号库管理</router-link>
			</div>
		</div>
		<div class="content">
		    <div class="flex">
		       <el-input class="phone" v-model="mobile" placeholder="输入手机号"></el-input>
		       <el-select v-model="pool_id" placeholder="选择号库">
		         <el-option  v-for="item in lists" :key="item.id" :label="item.name" :value="item.id"></el-option>
		       </el-select>
		        <el-select v-model="status" placeholder="请选择状态">
		          <el-option label="在用" value="1"></el-option>
		          <el-option label="停用" value="2"></el-option>
		        </el-select>
		    </div>
		    <div class="flex">
		        <el-date-picker v-model="time" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
		    </div>
		    <el-button type="danger" @click="searchgo">查询</el-button>
		    <el-button type="danger" v-if="func_E01" @click="numberlogshow">号码导入</el-button>
            <el-button type="primary" v-if="func_E01" @click="xiazai">下载模板</el-button>
		    <el-button type="primary" v-if="func_E01" plain @click="delall">批量删除查询到的号码</el-button>
		    <el-button type="primary" v-if="func_E01" plain @click="exall">批量导出查询到的号码</el-button>
		</div>
		<div class="con" v-loading="loading">
			<div class="list">
				<div class="th">号码</div>
				<div class="th">运营商</div>
				<div class="th">号库</div>
        <div class="th">归属地</div>
		        <div class="th">状态</div>
		        <div class="th">操作</div>
			</div>
			<div class="list" v-for="item in list" :key="item.id">
				<div class="td">{{item.mobile}}</div>
				<div class="td">{{item.type}}</div>
		        <div class="td">{{item.pool_name}}</div>
            <div class="td">{{item.province}}{{item.city}}</div>
		        <div class="td">{{item.status}}</div>
				<div class="td">
		            <el-button type="primary" size="mini" v-if="func_E01" plain @click="del(item.id)">删除</el-button>

		            <el-button type="primary" v-if="item.status != '下架' && func_E01 == true" size="mini" plain @click="fix(item.id)">下架</el-button>

		        </div>
			</div>
			<el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
		</div>
        <el-dialog title="号码导入" :visible.sync="numberlog" width="400px">
        	  <div class="randomdiv">
                      <el-form ref="form" @submit.native.prevent :model="form" label-width="80px">

                              <el-form-item label="运营商">
                                <el-select v-model="form.type" @change="changetype" placeholder="选择运营商">
                                  <el-option label="联通" value="1"></el-option>
                                  <el-option label="移动" value="2"></el-option>
                                  <el-option label="电信" value="3"></el-option>
                                </el-select>
                              </el-form-item>
                              <el-form-item label="号库名称">
                                  <el-select v-model="form.pool_id" placeholder="选择号库">
                                    <el-option  v-for="item in lists" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                  </el-select>
                              </el-form-item>
                              <el-form-item label="备注说明">
                                    <upload-excel-component  @on-selected-file="exportData" :limit="10" buttonName="导入号码" class="bbtn"></upload-excel-component>
                              </el-form-item>
                              <el-form-item v-if="num == 0?false:true">
                                    已添加{{num}}条号码，待上传。
                              </el-form-item>
                      </el-form>
              </div>
        	  <span slot="footer" class="dialog-footer">
        		<el-button @click="numberlog = false">取 消</el-button>
        		<el-button type="primary" @click="numbergo" :loading="numuploading">{{numupload}}</el-button>
        	  </span>
        </el-dialog>

        <el-dialog title="重复号码" center :visible.sync="log2" width="440px"  :close-on-click-modal="false" :close-on-press-escape="false">

            <div>重复号码：</div>
            <div v-for="item in cuowu" :key="item" style="margin-top: 5px;">
              {{item}}
            </div>


        	  <span slot="footer" class="dialog-footer">
        		<el-button type="info" round @click="log2 = false">取消</el-button>
        		<el-button type="danger" round @click="qiangzhi">强制导入</el-button>
        	  </span>
        </el-dialog>
	</div>

</template>

<script>
    import UploadExcelComponent from "@/components/UploadExcel/index.vue";
	import axios from 'axios'
	import top from '@/components/top.vue'
    import left from '@/components/left.vue'
    import foot from '@/components/foot.vue'
	export default{
		components: {
			"left": left,
            "top": top,
            "foot":foot,
            UploadExcelComponent
		},
		name : "number",
		data(){
			return {
                numuploading:false,
                numupload:"导入",
                numberlog:false,
                form:{
                    name:"",
                    type:"",
                    pool_id:"",
                    numbers:[]
                },
                lists:[

                ],
                loading:true,
				time:"",
                pool_id:"",
                status:"",
                mobile:"",
                page:1,
                pagesize:20,
                total:0,
                start_time:"",
                end_time:"",
                list:[],
                num:0,
                func_E01:false,
                url:"",
                cuowu:[],
                log2:false,
			}
		},
		created() {
            this.getlists();
			this.getlist();

            //地址配置,用于下载模板
            if(window.location.href.indexOf("91haoka_platform") > -1){
            	this.url = window.location.origin+"/91haoka_platform/"
            }else{
            	this.url = ""
            }

            //权限问题
            var user = JSON.parse(localStorage.getItem('USER'));
            this.user_func = user.functions
            for( var i in this.user_func){
                var func_number = this.user_func[i].code
                if(func_number.indexOf("E01") >= 0){ this.func_E01 = true }
            }
		},
		mounted(){

		},
		methods: {
            //下载模板
            xiazai:function(){
                const a = document.createElement('a');
                a.setAttribute('download', '上传号码模板.xlsx');
                a.setAttribute('href', this.url+'static/lianghao.xlsx');
                a.click();
            },
            //选取运营商重新获取号库
            changetype:function(){
                this.lists = ""
                this.getlists();
            },
            //导入手机号
            exportData:function(data) {
            	for(var i = 0 ;i < data.results.length; i++){
                let obj = {
                  mobile:data.results[i]['号码'],
                  province:data.results[i]['省'],
                  city:data.results[i]['市']
                }
            		this.form.numbers.push(obj)
            	}
                this.num = this.form.numbers.length
            },
            numberlogshow:function(){
              this.form.name =""
              this.form.type =""
              this.form.pool_id =""
              this.form.numbers = []
              this.num = this.form.numbers.length

              this.numberlog = true
            },
            qiangzhi:function(){

              console.log(this.form.pool_id)
              console.log(this.form.numbers)

              axios.post('/api/plan-market/numbers/import', {pool_id:this.form.pool_id,numbers:this.form.numbers,force_import:1})
                .then(response => {
                  if (response.data.msg.code == 0) {
                    this.log2 = false
                    this.$message.success(`导入成功`);
                    this.getlist()
                  } else {
                    this.$message.error(response.data.msg.info);
                  }
                })
            },


            //导入号池
            numbergo:function(){
                if(this.form.pool_id == ""){
                    this.$message({
                      message: '请先选择号库',
                      type: 'error'
                    });
                    return false
                }
                this.numuploading = true
                this.numupload = "导入中..."
                var that = this
                axios.post('/api/plan-market/numbers/import', {pool_id:this.form.pool_id,numbers:this.form.numbers})
                	.then(response => {
                		if(response.data.msg.code != 0){


                      if(response.data.msg.code == 51043){
                        response.data.msg.info = JSON.parse(response.data.msg.info)
                        this.cuowu = response.data.msg.info
                        this.log2 = true
                        this.numberlog = false



                      }else{
                        this.$message.error(response.data.msg.info);
                        that.numuploading = false
                        that.numupload = "导入"
                      }


                		}else{
                            that.numberlog = false
                            that.numuploading = false
                            that.numupload = "导入"

                            this.loading = true
                            if(response.data.data.error != 0){
                                this.$message({
                                  showClose:true,
                                  duration:0,
                                  message: '导入成功'+response.data.data.success+'条,失败'+response.data.data.error+'条。失败原因：号码重复导入。',
                                  type: 'error'
                                });
                            }else{
                                this.$message({
                                  message: '导入成功'+response.data.data.success+'条',
                                  type: 'success'
                                });
                            }


                            that.form.name =""
                            that.form.type =""
                            that.form.pool_id =""
                            that.form.numbers = ""
                            that.num = that.form.numbers.length

                			that.getlist()
                		}
                	})
            },
            //关闭时
            close:function(){
                this.form.name =""
                this.form.type =""
                this.form.pool_id =""
                this.form.numbers = ""
                this.num = this.form.numbers.length
            },
            //查询
            searchgo:function(){
                this.page = 1
                this.loading = true
                this.getlist()
            },
            //获取号码
            getlist:function(){
                if(this.time != ""){
                    this.start_time = this.time[0]
                    this.end_time = this.time[1]
                }else{
                    this.start_time = ""
                    this.end_time = ""
                }
                var that = this
                axios.get('/api/plan-market/numbers/list?page='+this.page+'&page_size=20&mobile='+this.mobile+'&pool_id='+this.pool_id+'&status='+this.status+'&start_time ='+this.start_time+'&end_time ='+this.end_time)
                	.then(response => {
                        that.total = response.data.data.total
                        for( var i in response.data.data.data){
                            if(response.data.data.data[i].status == 0){
                                response.data.data.data[i].status = "下架"
                            }
                            if(response.data.data.data[i].status == 1){
                                response.data.data.data[i].status = "上架"
                            }
                            if(response.data.data.data[i].status == 2){
                                response.data.data.data[i].status = "预占"
                            }

                            if(response.data.data.data[i].type == 1){
                                response.data.data.data[i].type = "联通"
                            }
                            if(response.data.data.data[i].type == 2){
                                response.data.data.data[i].type = "移动"
                            }
                            if(response.data.data.data[i].type == 3){
                                response.data.data.data[i].type = "电信"
                            }
                        }
                		that.list = response.data.data.data
                		that.loading = false
                	})
            },
            //获取号池
            getlists:function(){
                var that = this
                axios.get('/api/plan-market/pool/list?page=1&page_size=1000&type='+this.form.type)
                	.then(response => {
                		that.lists = response.data.data.data
                	})
            },
            //删除
			del:function(id){
                var that = this
                axios.post('/api/plan-market/number/delete',{id:id})
                	.then(response => {
                		if(response.data.msg.code != 0){
                			this.$message.error(response.data.msg.info);
                		}else{
                		    this.loading = true
                			this.$message({
                			  message: '删除成功！',
                			  type: 'success'
                			});
                			that.getlist()
                		}
                	})
            },
            //批量删除
            delall:function(){
                this.loading = true
                var that = this
                if(this.time != ""){
                    this.start_time = this.time[0]
                    this.end_time = this.time[1]
                }else{
                    this.start_time = ""
                    this.end_time = ""
                }
                axios.post('/api/plan-market/numbers/delete',{mobile:this.mobile,pool_id:this.pool_id,status:this.status,start_time:this.start_time,end_time:this.end_time})
                	.then(response => {
                		if(response.data.msg.code != 0){
                			this.$message.error(response.data.msg.info);
                		}else{
                			this.$message({
                			  message: '删除成功！',
                			  type: 'success'
                			});
                			that.getlist()
                		}
                	})
            },
            //导出
            exall:function(){
                var that = this
                if(this.time != ""){
                    this.start_time = this.time[0]
                    this.end_time = this.time[1]
                }else{
                    this.start_time = ""
                    this.end_time = ""
                }
                var url = '/api/plan-market/numbers/export?mobile='+this.mobile+'&pool_id='+this.pool_id+'&status='+this.status+'&start_time='+this.start_time+'&end_time='+this.end_time
                location.href = url

            },
            //修改
            fix:function(id){
                var that = this
                axios.post('/api/plan-market/number/status',{id:id,status:0})
                	.then(response => {
                		if(response.data.msg.code != 0){
                			this.$message.error(response.data.msg.info);
                		}else{
                		    this.loading = true
                			this.$message({
                			  message: '修改成功！',
                			  type: 'success'
                			});
                			that.getlist()
                		}
                	})
            },
            //翻页
            fanye:function(page){

                this.loading = true
                this.page = page
                this.getlist()
            }
		}
	}
</script>

<style lang="scss" scoped>
	.number{
		.content{
		    padding: 20px;
		    .flex{
		        display: flex; margin-bottom: 20px;
		        .el-select{ margin-left: 20px;}
		        .phone{ width: 300px; }
		    }
            .el-button{ padding: 10px 30px;}
		}
		.con{
		    .list{
		    	display: flex; text-align: center; color: #727272; line-height: 45px; border-top: 1px #EAEAEA solid; border-bottom: 1px #EAEAEA solid; margin-top: -1px;
		    	.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid; }
		    	.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid; }
		    }
		    .el-pagination{ text-align: right; margin: 20px 0}
		}
        .team{ background: #F9F9F9;}
        .powertop{ display: flex; width: 640px; }
        .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #F9F9F9 solid; color: #727272; border-right: 1px #F9F9F9 solid; font-size: 14px; text-align: center;}
        .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
        .bbtn{
            .el-button--primary{ background: #EEF7FF; border: 1px #EEF7FF solid;}
        }
	}
</style>
